<template>
  <div id="chart">
    <div class="sub-title">{{ $t('dianPuPingFenPaiHang') }}</div>
    <!-- <dv-charts :option="option" /> -->
    <echarts-new
      class="charts-container"
      :option-data="option"
      :styles="style"
      height="100%"
      width="100%"
      v-if="option"
    ></echarts-new>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import echartsNew from '@/components/echartsNew/index';
export default {
  name: 'rcChart',
  components: {
    echartsNew,
  },
  data() {
    return {
      style: { height: '100%' },
      option: {
        grid: {
          top: 40,
          left: 15,
          right: 20,
          bottom: 20,
          containLabel: true,
        },
        xAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#6C8097',
              fontSize: 12,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(108, 128, 151, 0.3)',
                type: 'dashed',
              },
            },
          },
        ],
        yAxis: [
          {
            axisLine: {
              lineStyle: {
                color: '#6C8097',
              },
            },
            axisTick: {
              show: false,
            },
            data: ['SH001', 'SH004', 'SH003', 'SH009', 'SH007', 'SH006', 'SH002'],
            axisLabel: {
              color: '#D0DEEE',
              fontSize: 12,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: 'Income',
            type: 'bar',
            stack: 'Total',
            barWidth: 8,
            data: [320, 420, 341, 450, 390, 374, 302],
            itemStyle: {
              normal: {
                // barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgb(57,89,255,0)',
                  },
                  {
                    offset: 1,
                    color: '#159AFF',
                  },
                ]),
              },
            },
          },
          {
            name: 'Expenses',
            type: 'bar',
            stack: 'Total',
            barWidth: 8,
            data: [-120, -132, -101, -134, -190, -230, -210],
            itemStyle: {
              normal: {
                // barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#D0DEEE',
                  },
                  {
                    offset: 1,
                    color: 'rgb(57,89,255,0)',
                  },
                ]),
              },
            },
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
#chart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .charts-container {
    height: calc(100% - 50px);
  }
}
</style>
